<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mio澪游圈</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
            color: #fff;
            min-height: 100vh;
            overflow: hidden;
            padding: 0;
        }

        .container {
            display: flex;
            flex-direction: column;
            height: 100vh;
            padding: 0;
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 3px 10px;
            background: rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .logo-icon {
            font-size: 16px;
        }

        .logo-text {
            font-size: 12px;
            font-weight: bold;
        }

        .controls {
            display: flex;
            gap: 8px;
        }

        .nav-btn {
            padding: 5px 8px;
            background: rgba(253, 187, 45, 0.8);
            color: #1a2a6c;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .nav-btn:hover {
            background: #ffcc44;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        .nav-btn:disabled {
            background: #666;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        .nav-btn i {
            font-size: 16px;
        }

        .webview-container {
            flex: 1;
            position: relative;
            display: flex;
        }

        webview {
            width: 100%;
            height: 100%;
            display: flex;
        }

        .loading-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 100;
            backdrop-filter: blur(5px);
            transition: opacity 0.3s;
        }

        .spinner {
            width: 50px;
            height: 50px;
            border: 5px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top-color: #fdbb2d;
            animation: spin 1s linear infinite;
            margin-bottom: 20px;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        .status-bar {
            padding: 8px 20px;
            background: rgba(0, 0, 0, 0.3);
            font-size: 14px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }

        .url-display {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 80%;
            font-weight: bold;
            color: #fdbb2d;
        }

        .loading-text {
            font-size: 18px;
            margin-bottom: 10px;
        }

        .progress-bar {
            width: 300px;
            height: 8px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 4px;
            overflow: hidden;
        }

        .progress {
            height: 100%;
            background: #fdbb2d;
            width: 0%;
            transition: width 0.3s;
        }

        .hidden {
            display: none;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="header">
        <div class="logo">
            <div class="logo-icon">🌐</div>
            <div class="logo-text">Mio-Fun</div>
        </div>
        <div class="controls">
            <button id="backBtn" class="nav-btn" disabled>
                <i>←</i> 返回
            </button>
        </div>
    </div>

    <div class="webview-container">
        <webview
                id="mioWebview"
                src=""
                partition="persist:webview-session"
                allowfullscreen
                preload="./preload.js"
                webPreferences="contextIsolation=true,nodeIntegration=false"
                allowpopups
        ></webview>

        <div id="loadingOverlay" class="loading-overlay">
            <div class="spinner"></div>
            <div class="loading-text">正在加载 Mio 系统...</div>
            <div class="progress-bar">
                <div id="progress" class="progress"></div>
            </div>
        </div>
    </div>

</div>

<script>
        document.addEventListener('DOMContentLoaded', async () => {
            const webview = document.getElementById('mioWebview');
            const backBtn = document.getElementById('backBtn');
            const loadingOverlay = document.getElementById('loadingOverlay');
            const progress = document.getElementById('progress');
            const header = document.querySelector('.header');
            const urlDisplay = document.querySelector('.url-display');
            
            // 获取并应用配置
            async function applyConfig() {
                try {
                    // 通过IPC获取API URL
                    let apiUrl;
                    if (window.electronAPI && window.electronAPI.config && window.electronAPI.config.getApiUrl) {
                        apiUrl = await window.electronAPI.config.getApiUrl();
                        const environment = await window.electronAPI.config.getEnvironment();
                        console.log(`[index.html] 已获取配置: ${apiUrl} (${environment})`);
                        
                        // 更新显示的URL和环境信息
                        if (urlDisplay) {
                            urlDisplay.textContent = `${environment}: ${apiUrl}`;
                        }
                    } else {
                        // 默认URL
                        apiUrl = 'http://43.132.146.198:8081/mio3';
                        console.log('[index.html] 使用默认URL');
                        if (urlDisplay) {
                            urlDisplay.textContent = `默认: ${apiUrl}`;
                        }
                    }
                    
                    // 设置webview的src
                    if (webview && apiUrl) {
                        webview.src = apiUrl;
                    }
                } catch (error) {
                    console.error('[index.html] 获取配置失败:', error);
                    // 出错时使用默认URL
                    webview.src = 'http://43.132.146.198:8081/mio3';
                }
            }
            
            // 立即应用配置
            applyConfig();
            
            // 监听配置更新事件
            if (window.electronAPI && window.electronAPI.onConfigUpdate) {
                window.electronAPI.onConfigUpdate((config) => {
                    console.log('[index.html] 收到配置更新:', config);
                    if (webview && config.apiUrl) {
                        webview.src = config.apiUrl;
                    }
                    if (urlDisplay && config.environment && config.apiUrl) {
                        urlDisplay.textContent = `${config.environment}: ${config.apiUrl}`;
                    }
                });
            }
        
        // 监听全屏状态变化
        function handleFullscreenChange() {
            const isFullscreen = document.fullscreenElement !== null || 
                               document.webkitFullscreenElement !== null ||
                               document.mozFullScreenElement !== null ||
                               document.msFullscreenElement !== null;
            
            // 隐藏或显示UI元素
            if (isFullscreen) {
                header.style.display = 'none';
            } else {
                header.style.display = 'flex';
            }
        }
        
        // 添加全屏变化事件监听
        document.addEventListener('fullscreenchange', handleFullscreenChange);
        document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
        document.addEventListener('mozfullscreenchange', handleFullscreenChange);
        document.addEventListener('MSFullscreenChange', handleFullscreenChange);
        
        // 监听webview中的全屏请求
        webview.addEventListener('enter-html-full-screen', () => {
            console.log('Webview进入全屏模式');
            header.style.display = 'none';
            // 通知主进程隐藏菜单栏
            if (window.electronAPI && window.electronAPI.setMenuVisibility) {
                window.electronAPI.setMenuVisibility(false);
            }
        });
        
        webview.addEventListener('leave-html-full-screen', () => {
            console.log('Webview退出全屏模式');
            header.style.display = 'flex';
            // 通知主进程显示菜单栏
            if (window.electronAPI && window.electronAPI.setMenuVisibility) {
                window.electronAPI.setMenuVisibility(true);
            }
        });

        // 模拟加载进度
        let progressInterval = setInterval(() => {
            if (progress.style.width === '100%') {
                clearInterval(progressInterval);
                return;
            }
            const currentWidth = parseInt(progress.style.width || '0');
            progress.style.width = Math.min(currentWidth + 10, 100) + '%';
        }, 300);

        // WebView 事件监听
        webview.addEventListener('did-start-loading', () => {
            loadingOverlay.classList.remove('hidden');
            backBtn.disabled = true;
        });

        webview.addEventListener('did-stop-loading', () => {
            setTimeout(() => {
                loadingOverlay.classList.add('hidden');
            }, 500);

            // 更新导航按钮状态
            backBtn.disabled = !webview.canGoBack();
        });


        webview.addEventListener('new-window', (e) => {
            console.log('新窗口请求:', e.url);
            // 在WebView内打开而不是外部浏览器
            e.preventDefault();
            webview.src = e.url;
        });

        webview.addEventListener('dom-ready', () => {
            // 加载完成后隐藏加载层
            loadingOverlay.classList.add('hidden');
            progress.style.width = '100%';
            clearInterval(progressInterval);

            // 注入自定义CSS
            webview.insertCSS(`
                    body {
                        background-color: #f0f2f5;
                    }
                    .header {
                        background-color: #fff;
                        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
                    }
                `);
        });

        // 按钮事件
        backBtn.addEventListener('click', () => {
            if (webview.canGoBack()) {
                webview.goBack();
            }
        });


        // 处理键盘快捷键
        document.addEventListener('keydown', (e) => {
            if (e.ctrlKey && e.key === 'r') {
                webview.reload();
                e.preventDefault();
            }
            
            // 监听F11键全屏切换
            if (e.key === 'F11') {
                setTimeout(() => {
                    handleFullscreenChange();
                }, 100); // 延迟执行，确保全屏状态已更新
            }
            
            // 添加开发模式切换快捷键 (Ctrl+Shift+D)
            if (e.ctrlKey && e.shiftKey && e.key === 'd') {
                console.log('[index.html] 切换开发模式快捷键');
                // 这里可以添加开发模式切换逻辑
                alert('开发模式切换功能已预留');
                e.preventDefault();
            }
        });

    });
</script>
</body>
</html>